<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/style.css" rel="stylesheet" >
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="wrap">
        <div class="banner">
         <div class="content">
             <div class="banner_left">
                 <img src="img/top.jpg" alt="logo">
             </div>
             <div class="banner_mid">
                 <ul>
                     <li class="sctive"><a href="index.html"><span>首页</span></a></li>
                     <li><a href="jianjie.html"><span>简介</span></a></li>
                     <li><a href="meishi.html"><span>美食</span></a></li>
                     <li><a href="wenhua.html"><span>文化</span></a></li>
                 </ul>
             </div>
         </div>
        </div>
        <div class="imgBox">
          <img class="img-slide img1" src="img/meishi/1.jpg" alt="1">
          <img class="img-slide img2" src="img/meishi/2.jpg" alt="2">
          <img class="img-slide img3" src="img/meishi/3.jpg" alt="3">
          <img class="img-slide img4" src="img/meishi/4.jpg" alt="4">
          <img class="img-slide img5" src="img/meishi/5.jpg" alt="5">
          <img class="img-slide img6" src="img/meishi/6.jpg" alt="6">
          <img class="img-slide img7" src="img/meishi/7.jpg" alt="7">
          <img class="img-slide img8" src="img/meishi/8.jpg" alt="8">
          <img class="img-slide img9" src="img/meishi/9.jpg" alt="9">
          
          
           <script type="text/javascript">
           var index=0;
           //改变图片
           function ChangeImg() {
               index++;
              var a=document.getElementsByClassName("img-slide");
              if(index>=a.length) index=0;
              for(var i=0;i<a.length;i++){
                  a[i].style.display='none';
              }
               a[index].style.display='block';
             }
           //设置定时器，每隔两秒切换一张图片
            setInterval(ChangeImg,500);
            </script>
        </div>
        <div class="pailie">
          <div class="content">
            <div class="pailie_top">
              <h3>四川名美食</h3>
            </div>
            <div class="pailie_mid_top">
              <div class="pailie_mid_top_box">
                 <img src="img/meishi/sznr.jpg" alt="">
                 <p><span>水煮牛肉</span></p>
                 <p>946人推荐</p>
              </div>
              <div class="pailie_mid_top_box">
                 <img src="img/meishi/ddm.jpg" alt="">
                 <p><span>担担面</span></p>
                 <p>946人推荐</p>
              </div>
              <div class="pailie_mid_top_box">
                 <img src="img/meishi/scpc.jpg" alt="">
                 <p><span>四川泡菜</span></p>
                 <p>946人推荐</p>
              </div>
              <div class="pailie_mid_top_box">
                <img src="img/meishi/ksj.jpg" alt="">
                <p><span>口水鸡</span></p>
                <p>946人推荐</p>
              </div>
              <div class="pailie_mid_top_box">
                <img src="img/meishi/fqfp.jpg" alt="">
                <p><span>夫妻肺片</span></p>
                <p>946人推荐</p>
              </div>
              <div class="pailie_mid_top_box">
                <img src="img/meishi/mlj.jpg" alt="">
                <p><span>麻辣鸡</span></p>
                <p>946人推荐</p>
              </div>
            </div>
             
            <div class="pailie_mid_botton">
              <div class="pailie_mid_botton_box">
                <img src="img/meishi/bbj.jpg" alt="">
                <p><span>棒棒鸡</span></p>
                <p>946人推荐</p>
             </div>
             <div class="pailie_mid_botton_box">
                <img src="img/meishi/scy.jpg" alt="">
                <p><span>酸菜鱼</span></p>
                <p>946人推荐</p>
             </div>
             <div class="pailie_mid_botton_box">
                <img src="img/meishi/zfnr.jpg" alt="">
                <p><span>张飞牛肉</span></p>
                <p>946人推荐</p>
             </div>
             <div class="pailie_mid_botton_box">
               <img src="img/meishi/lcs.jpg" alt="">
               <p><span>龙抄手</span></p>
               <p>946人推荐</p>
             </div>
             <div class="pailie_mid_botton_box">
               <img src="img/meishi/sxlf.jpg" alt="">
               <p><span>伤心凉粉</span></p>
               <p>946人推荐</p>
             </div>
             <div class="pailie_mid_botton_box">
               <img src="img/meishi/zsj.jpg" alt="">
               <p><span>钟水饺</span></p>
               <p>946人推荐</p>
             </div>
            </div>
            <div class="pailie_botton">
                <nav aria-label="Page navigation">
                  <ul class="pagination">
                    <li>
                      <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                      <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav>
            </div>
          </div>
        </div>
        <div class="footer">
         <div class="content">
           <div class="footer_box">
                <h4>&copy;关于我们</h4>
                <p>四川省总面积48.6万平方公里，辖21个地级行政区， [8]其中18个地级市、<br>
                  3个自治州。共55个市辖区、18个县级市，106个县，4个自治县，合计183个
                  县级区划。353个街道、2232个镇、1929个乡、98个民族乡，合计4612个乡<br>
                  级区划。</p>
            </div>
           </div>
        </div>
   </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>